<template>
	<view>
		<navbar title="地址信息" />
		<view class="addressBox">
			<empty v-if="dataList.length === 0" />
			<up-swipe-action>
				<up-swipe-action-item :options="swipeOptions" v-for="item in dataList" :key="item.id" @click="delAddress(item)">
					<view class="main v-details-card border-box relative" @click="changeDetails(item.id)">
						<view class="header flex align-item_center justify-content_space-between">
							<view>{{item.name}}</view>
							<image class="block" src="https://mall-admin.xinjiafu.net/mini-static/images/user/0.png" />
						</view>
						<u-gap height="20rpx"></u-gap>
						<view class="line"></view>
						<view class="content">{{item.areaName}} {{item.detailAddress}}</view>
						<view class="content">收件人：{{item.name}}</view>
						<view class="content flex align-item_center justify-content_space-between">手机号：{{item.mobile}}
							<view class="settingDefault absolute" v-if="!item.defaultStatus" @click.stop='setDefaultStatus(item)'>
								设为默认地址
							</view>
						</view>
					</view>
				</up-swipe-action-item>
			</up-swipe-action>
		</view>

		<view class="saveConfirm" @click="changeDetails(-1)">新增</view>
	</view>
</template>

<script setup>
	import empty from "@/components/empty.vue"
	import {
		reactive,
		ref
	} from "vue"
	import navbar from "@/components/navbar.vue"
	import {
		navigateTo
	} from "@/utils/tool";
	import {
		onLoad,
		onShow,
	} from '@dcloudio/uni-app';
	import addressApi from "@/api/member/address.js"
	import areaApi from "@/api/system/area.js"

	const delAddress = (item) => {
		addressApi.delete(item.id).then(() => {
			addressList()
		})
	}

	const swipeOptions = reactive([{
		text: '删除'
	}]);

	const setDefaultStatus = (item) => {
		addressApi.update({
			...item,
			defaultStatus: true
		}).then(() => {
			addressList()
		})
	}

	const changeDetails = (id) => {
		areaApi.tree().then(res => {
			uni.setStorageSync("areaData", res.data)
			navigateTo(`/user/setting_address/details` + (id === -1 ? '' : `?id=${id}`))
		})
	}

	const dataList = ref([])

	const addressList = () => {
		addressApi.list().then(res => {
			dataList.value = res.data
		})
	}

	onShow(() => {
		addressList()
	})
</script>

<style>
	page {
		background: #F8F3E7;
	}
</style>
<style scoped lang="scss">
	.addressBox {
		padding: 0 20rpx;
	}

	:deep(.u-swipe-action-item) {
		box-sizing: border-box;
		margin: 20rpx auto 0;
	}

	.saveConfirm {
		position: fixed;
		bottom: 50rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 710rpx;
		height: 92rpx;
		line-height: 92rpx;
		text-align: center;
		border-radius: 100rpx;
		background: rgba(167, 37, 48, 1);

		font-size: 32rpx;
		font-weight: 400;
		color: rgba(245, 245, 245, 1);
	}

	.main {
		padding: 22rpx 20rpx;
		margin: 0 auto 0;

		.settingDefault {
			right: 10rpx;
			bottom: 16rpx;
			width: 240rpx;
			height: 56rpx;
			line-height: 56rpx;
			text-align: center;
			border-radius: 100rpx;
			background: rgba(167, 37, 48, 1);
			font-size: 28rpx;
			font-weight: 400;
			color: rgba(255, 255, 255, 1);
		}

		.content {
			font-size: 28rpx;
			font-weight: 400;
			letter-spacing: 0rpx;
			line-height: 40.54rpx;
			color: rgba(64, 3, 3, 1);
			margin-top: 20rpx;
		}

		.line {
			width: 100%;
			border-top: 1rpx solid rgba(204, 204, 204, 1);
		}

		.header {
			image {
				width: 12rpx;
				height: 24rpx;
			}

			view {
				font-size: 32rpx;
				font-weight: 400;
				letter-spacing: 0rpx;
				line-height: 46.34rpx;
				color: rgba(64, 3, 3, 1);
			}
		}
	}
</style>